<template>
    <div>
        <div class="back">
            <div @click="goback">
                <svg-icon icon-class="back" />
                <span>返回</span>
            </div>
        </div>
        <div class="thy_menu" v-for="(items, index) in arrayConversionFunc(routes)" :key="index">
            <div v-if="items.identifying" class="thy_menu_title" :class="{ borderTop: index != 0 }">
                <el-divider direction="vertical" class="dividerClass"></el-divider>
                <span>{{ items.identifying }}</span>
            </div>
            <div v-for="item in items.childs" :key="item.path">
                <div v-if="itemPageFunc(item)" class="thy_menu_box">
                    <div class="thy_menu_item" :class="[activeIndex == item.path ? 'thy_menu_active' : '']"
                        @click="toPageClick(item)">
                        <svg-icon :icon-class="item.meta.icon ? item.meta.icon : ''" className="svgIcons"
                            :style="{ color: item.iconColor ? item.iconColor : '' }"></svg-icon>
                        <span>{{ item.meta.title }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import usePermissionStore from '@/store/modules/permission'
import useUserStore from '@/store/modules/user'
const userStore: any = useUserStore()

const permissionStore = usePermissionStore()
const sidebarRouters = computed<any[]>(() => permissionStore.getSidebarRoutes())
const activeIndex = ref('')
const route = useRoute()
const router = useRouter()

const routes = computed(() => {
    let currentRoutes = { children: sidebarRouters.value }
    const matchedRoutes = route.matched

    for (let i = 0; i < matchedRoutes.length - 1; i++) {
        currentRoutes = currentRoutes.children.find((e: any) => {
            return e.name === matchedRoutes[i].name
        }) || { children: [] }
    }

    return currentRoutes.children
})

// 监听路由变化
watch(route, (newRoute, oldRoute) => {
    const valArr = newRoute.path.split('/')
    activeIndex.value = valArr[valArr.length - 1]
}, { deep: true, immediate: true })


const toPageClick = (item: { path: string }) => {
    const pathArr = route.path.split('/')
    pathArr[pathArr.length - 1] = item.path
    const path = pathArr.join('/')
    router.push(path)
}

const arrayConversionFunc = (arr1: any) => {
    const arr = []
    console.log(arr1, "arr1")

    arr1.forEach((item) => {
        if (item.path === 'ai-library') {
            return // 如果是，则跳过当前循环
        }
        const parent = arr.find((cur) => cur.identifying === item.identifying)
        if (parent) {
            // console.log(item);
            if (!item.hidden) {
                parent.childs.push(item)
            }
        } else {
            if (!item.hidden) {
                const obj = {
                    identifying: item.identifying,
                    childs: [item]
                }

                arr.push(obj)
            }
        }
    })
    console.log(arr)
    return arr
}
// 页面显示方法
const itemPageFunc = (item: any) => {
    // 摆渡页面单独的配置
    if (item.path == 'document-ferry') {
        return !item.hidden && userStore?.ferrySwitch
    } else {
        return !item.hidden
    }
}

// 返回
const goback = () => {
    router.push('/calendar/index/myCalendar')
}

</script>
<style scoped lang='scss'>
.pageBox {
    display: flex;
    width: 100%;
    height: calc(100vh - 50px);

    .pageLeft {
        width: 200px;
        height: 100%;
        border-right: 1px solid #eee;

        .thy_menu {
            .borderTop {
                border-top: 1px solid #f5f5f5;
            }
        }

        .thy_menu_title {
            width: 100%;
            padding: 18px 20px;
            color: #999;
            font-size: 13px;
            display: flex;
            align-items: center;
        }

        .dividerClass {
            width: 3px;
            border-radius: 2px;
            margin: 0 6px 0 2px;
            height: 16px;
            background-color: #6698ff;
        }

        .thy_menu_item {
            width: 100%;
            padding: 11px 20px;
            color: #333333;
            font-size: 15px;
            cursor: pointer;
            margin-bottom: 8px;
            display: flex;
            align-items: center;

            &:hover {
                background-color: #f5f5f5;
            }
        }

        .thy_menu_active {
            background-color: rgba(102, 152, 255, 0.1);
            color: #6698ff;
        }

        .svgIcons {
            font-size: 15px;
            vertical-align: middle;
            margin-right: 10px;
            margin-left: 4px;
        }
    }

    .pageRight {
        width: calc(100% - 260px);
    }
}

.back {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 15px;
    padding: 2px 20px 16px;
    border-bottom: 1px solid #f5f5f5;

    div {
        cursor: pointer;
    }

    span {
        margin-left: 6px;
    }
}
</style>